import { useCallback, useEffect, useRef } from "react";
import { ConversationInfoListItemType } from "../../../../types/conversation"
import { ConversationInfoListItem } from "./components/ConversationInfoListItem";

import './index.css';

interface ConversationInfoListProps {
  data: ConversationInfoListItemType[]
}

export const ConversationInfoList: React.FC<ConversationInfoListProps> = (props) => {

  const listRef = useRef<HTMLDivElement>(null);

  const { data } = props;

  const scrollToBottom = useCallback(() => {
    if (listRef.current) {
      listRef.current.scrollTop = listRef.current.scrollHeight;
    }
  }, [listRef.current]);

  useEffect(() => {
    scrollToBottom();
  }, [listRef.current, data]);

  return (<div ref={listRef} className="conversation-info-list-wrapper">{
    data ? data.map((item, index) => {
      return <ConversationInfoListItem key={item.info_id} data={item} />
    }) : null
  }</div>)
}